<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useChannelStore }from '@/stores/channel'
const channelStore = useChannelStore()



// 频道接口响应数据类型定义
type ChannelItem = {
  id: number;
  name: string;
};

// 频道接口响应数据
type ChannelResData = {
  data: {
    channels: ChannelItem[];
  };
  message: string;
};

const channels = ref<ChannelItem[]>([
  { id: 0, name: '推荐' },
  { id: 1, name: '设计' },
  { id: 2, name: '前端' },
  { id: 3, name: '后端' },
  { id: 4, name: '移动' },
  { id: 5, name: '人工智能' },
  { id: 6, name: '大数据' },
  { id: 7, name: '区块链' },
  { id: 8, name: '编程语言' },
]);

onMounted(async()=>{
  try {
    const res = await axios.get<ChannelResData>('http://geek.itheima.net/v1_0/channels');
      channels.value = res.data.data.channels;
  } catch (error) {}



})

const props = defineProps<{
  channelId: number;
}>()

const emit = defineEmits<{
  (e: "changeChannel",  id: number): void;
}>()

</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === channelId }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
        @click="emit('changeChannel', item.id)"
      >
        {{ item.name }}
      </a>

      <!-- 使用这里是使用了一下Store 将channelId 传给了Store -->
      <a
        class="item"
        :class="{ active: item.id === channelId }"
        href="javascript:;"
        v-for="item in channels"
        :key="item.id"
        @click="channelStore.changeChannel(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
